<template>
  <at-card>
    <view class="flex-between">
      <view class="fw-600 f-s-lx">清洁工</view>
      <view class="money">20元/天</view>
    </view>
    <view class="py-10">
      <view class="work-tag">男女不限</view>
    </view>
    <view class="py-10 f-s-xl">小时工</view>
    <view class="f-s-m f-c-9">虹桥世界中心</view>
    <view class="p-20 flex-between" style="background: #f8f8f8;margin-top: 10rpx;border-radius: 5rpx">
      <view class="flex-c-center">
        <view class="fw-600">12:23</view>
        <view class="f-s-m f-c-9">上班时间</view>
      </view>
      <view>
        <view class="f-s-m time-tag">
          工作时间
        </view>
      </view>
      <view class="flex-c-center">
        <view class="fw-600">18:30</view>
        <view class="f-s-m f-c-9">下班时间</view>
      </view>
    </view>
    <view class="mt-20">
      <up-button icon="file-text" color="#ff7100" icon-color="#fff" @click="toPath('/home/gigDetail/gigDetail')">
        查看详情
      </up-button>
    </view>
  </at-card>
</template>

<script setup>

import {toPath} from "@/utils/commonUtils";
</script>

<style lang="scss" scoped>
@mixin tag {
  content: '';
  position: absolute;
  background: #fff1e8;
  width: 100rpx;
  height: 1rpx;
  top: 50%;
}

.time-tag {
  background: #fff1e8;
  border-radius: 100rpx;
  padding: 4rpx 15rpx;
  color: #ff8040;
  position: relative;

  &::before {
    @include tag;
    right: -110rpx;
  }

  &::after {
    @include tag;
    left: -110rpx;
  }
}
</style>